<template>
  <el-form ref="form" :model="form" label-position="left" label-width="110px">
    <div class="base_info">
      <!-- <div class="info_box">
        <el-form-item label="选择算法：">
          <el-cascader
            :options="options[activeTab]"
            class="bin_cascader"
            :props="props"
            popper-class="bin_cascader_popper"
            v-model="chartType"
            clearable:show-all-levels="false"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </div> -->
    </div>
    <div class="output_set">
      <div class="title_label">
        <span>参数设置</span>
      </div>
      <div class="info_box">
        <el-form-item
          :label="item.variableChineseName"
          v-for="(item, index) in inputParams"
          :key="index"
        >
          <el-input
            class="bin_input"
            v-model="form[item.variableChineseName]"
            placeholder="请输入参数"
          ></el-input>
          <!-- @input="dataValidate(form[item.variableName], item.inputOutputDataType)" -->
        </el-form-item>
      </div>
    </div>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="startBtn">
        开始计算
      </el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    inputParams: {
      type: Array,
      default: () => [],
    },
    activeTab: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartType: [],
      props: { value: "typeId", label: "name" },
      options: {},
      form: {},
    };
  },

  watch: {
    inputParams: {
      handler(newVal, oldVal) {
        const form = {};
        for (let i = 0; i < newVal.length; i++) {
          form[newVal[i].variableChineseName] = newVal[i].defaultValue;
        }
        this.form = JSON.parse(JSON.stringify(form));
      },
      deep: true, // 对于对象或数组，开启深度监听
      immediate: true, // 组件加载时不立即执行
    },
  },
  created() {
    this.getSuanTree();
  },
  methods: {
    getSuanTree() {
      this.$api.algorithmTypeTree().then((res) => {
        if (res.code == 200) {
          this.$set(
            this.options,
            "zao",
            res.result["水声信号谱分析和谱特征提取"]
          );
          this.$set(this.options, "shui", res.result["水声信号处理"]);
        }
      });
    },
    handleChange(a, b, c) {
      this.$api
        .getAlgorithmByType({
          algorithmType: a[0],
        })
        .then((res) => {
          if (res.code == 200) {
            this.$emit("getInputOutput", res.result[0].algorithmId);
          }
        });
    },
    cancelBtn() {
      this.$emit("cancel");
    },
    convertDialogVisibleFn() {},
    delete1() {},
    dataValidate(value, type) {
      if (type == 1) {
        const regex = /^\d+$/;
        if (!regex.test(value)) {
          this.$message({
            type: "info",
            message: "请输入整数！",
          });
        }
      } else if (type == 2) {
        const regex = /^-?\d+(\.\d+)?$/;
        if (!regex.test(value)) {
          this.$message({
            type: "info",
            message: "请输入双精度浮点数！",
          });
        }
      } else if (type == 3) {
        const regex = /^((-?\d+(\.\d+)?)(,(-?\d+(\.\d+)?))*)$/;
        if (!regex.test(value)) {
          this.$message({
            type: "info",
            message: "请输入用逗号分隔的浮点数！",
          });
        } else {
          const parts = value.split(",");
          for (let i = 0; i < parts.length; i++) {
            if (!/^\-?\d+(\.\d+)?$/.test(parts[i].trim())) {
              this.$message({
                type: "info",
                message: `第${i + 1}个元素不是有效的浮点数！`,
              });
              return;
            }
          }
        }
      }
    },
    formatReverse() {
      let form = JSON.parse(JSON.stringify(this.form));
      this.inputParams.map((e) => {
        if (form[e.variableName]) {
          if (e.inputOutputDataType == 1) {
            form[e.variableName] = Number(form[e.variableName]);
          } else if (e.inputOutputDataType == 2) {
            form[e.variableName] = Number(form[e.variableName]);
          }
        } else {
          form[e.variableName] = null;
        }
      });
      return form;
    },
    startBtn() {
      let inputForm = this.formatReverse();
      let form1 = this.inputParams.map((e) => {
        return {
          isInputOrOutput: e.isInputOrOutput,
          inputOrOutputSort: e.inputOrOutputSort,
          inputOutputDataType: e.inputOutputDataType,
          inputOrOutputValue: inputForm[e.variableName],
        };
      });
      let form = this.inputParams.map((e) => {
        return {
          [e.variableChineseName]: this.form[e.variableChineseName],
        };
      });
      let for2m = this.inputParams.map((e) => {
        return {
          参数名称: e.variableChineseName,
          参数值: this.form[e.variableChineseName],
        };
      });
      this.$emit("start", for2m);
    },
  },
};
</script>

<style scoped lang="scss">
.edit_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding-bottom: 20px;
}
.title_label {
  background-color: rgba(2, 255, 244, 0.15);
  width: 100%;
  height: 50px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  line-height: 50px;
  text-align: left;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
::v-deep .el-form-item__label {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
}
.info_box,
.params_box,
.output_box {
  padding: 20px 40px;
  padding-bottom: 0;
}
.paramsItem,
.outputItem {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin-bottom: 20px;
  .params_form_box,
  .output_form_box {
    width: calc(100% - 48px);
    .form_title {
      background-color: rgba(2, 255, 244, 0.1);
      height: 40px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fff;
      line-height: 40px;
      display: flex;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .miniform_box {
      background: rgba(2, 82, 107, 0.2);
      padding: 20px;
      box-sizing: border-box;
      .el-form-item {
        &:last-child {
          margin-bottom: 0;
        }
      }
      .line {
        text-align: center;
        color: #fff;
      }
    }
  }
  .del {
    cursor: pointer;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(12, 81, 99, 0.5);
  }
}
/* Add your styles here */
</style>
